<template>
  <div
    class="derOnlyOneContainer _containers"
    :style="{
      transformOrigin: 'top left',
      left: `${left}px`,
      top: `${top}px`,
    }"
  >
    <div class="contentBox">
      <el-image
        style="width: 100%; min-height: 100%"
        :src="src"
        :zoom-rate="1.2"
        :max-scale="7"
        :min-scale="0.2"
        :initial-index="srcIndex"
        fit="contain"
      />
    </div>

    <Title title="预览" @close="close" @getPosition="getPosition">
      <div class="modeContainer" v-if="!startPage">
        <div :class="`modeBox ${dir == 'V' && 'modeSelect'}`">
          <icon-font type="icon-daotu2" class="iconfont" />
        </div>
      </div>
    </Title>
  </div>
</template>

<script>
import closeIcon from '../../../assets/teaching/close.svg';
import useWs from '../../../store/webConnect';
import Title from '../panel/title.vue';
import { mapState } from 'pinia';

export default {
  components: { Title },
  props: { src: String, srcIndex: Number },
  data() {
    return {
      startPage: true,
      left: 0,
      top: 0,
      status: false,
      closeIcon,
    };
  },
  watch: {},
  created() {},
  computed: {
    ...mapState(useWs, ['files']),
  },

  methods: {
    // Title 组件返回的 x, y值
    getPosition({ x, y }) {
      this.left = x;
      this.top = y;
    },
    close() {
      console.log('关闭');
      this.$emit('close');
    },
  },
};
</script>
<style lang="scss" scoped>
._containers {
  width: 60em;
  /* 880px converted to em */
  height: 46.25em;
  /* 580px converted to em */
  background: #fff;
  box-shadow: 0px 0px 1em 0px rgba(0, 0, 0, 0.1);
  position: relative;
  box-sizing: border-box;
  border-radius: 0.875em;
  /* 7px converted to em */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  // cursor: move;

  .contentBox {
    flex: 1;
    background: #fff;
    overflow-y: auto;

    /*滚动条样式*/
    &::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 2px; /*高宽分别对应横竖滚动条的尺寸*/
      height: 4px;
    }
    &::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 0px;
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: rgba(0, 0, 0, 0.2);
    }
  }

  .modeContainer {
    display: flex;
    margin-left: 20px;
    align-items: center;
    cursor: pointer;
    box-sizing: border-box;

    .modeBox {
      width: 40px;
      height: 40px;
      border: 1px solid #000000;
      background: #ffffff;
      border-radius: 8px;
      margin-right: 16px;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;

      .iconfont {
        font-size: 20px;
      }
    }

    .modeSelect {
      border: 1px solid #ff8500;

      .iconfont {
        color: #ff8500;
      }
    }
  }
}
</style>